<template>
  <view>
    <view class="mch_info">
      <image
        class="avatar"
        :src="
          mch_info.mch_logo
            ? 'http:' + mch_info.mch_logo
            : 'https://img.xingkonglian.net/img/common/shop_default.png'
        "
      ></image>
      <view class="right">
        <view class="mch_wx_name">{{ mch_info.mch_name }}</view>
        <view class="goods_btn">商户号：{{ mch_info.mch_code }}</view>
      </view>
    </view>
    <view class="with_draw_box">
      <view class="top_box">
        <view class="tip_container">
          <text style="color: #9d9ca3">可提现金额</text
          ><i class="iconfont icon-wenhao" style="marigin-left: 10rpx"></i>
        </view>
        <view class="can_with_count">￥{{ mch_info.balance }}</view>
      </view>
      <view class="bottom_box">
        <view class="can_with_text"
          >当前可用余额<span>{{ mch_info.balance }}元</span></view
        >
        <van-button custom-class="with_btn" @tap="go_withdraw(mch_info.balance)">提现</van-button>
      </view>
    </view>
    <view class="tip_box">
      <view>1、提现申请预计12小时内到账 </view>
      <view>2、每月22号结算上个月有效订单</view>
      <view>3、余额可随时提现</view>
    </view>
    <van-dialog id="van-dialog" />
  </view>
</template>

<script>
const app = getApp();
import Dialog from "../../wxcomponents/vant/dialog/dialog";
import {
  withdraw,
} from "../../utils/imapi";
export default {
  props: {},
  components: {},
  data() {
    return {
      mch_info: {},
    };
  },
  computed: {
    // can_with_count() {
    //   return this.mch_info.balance - this.mch_info.frozen_balance;
    // },
  },
  watch: {},
  onLoad() {
    this.mch_info = app.globalData.userinfo;
  },
  onReady() {},
  onShow() {},
  methods: {
      go_withdraw(money) {
      Dialog.confirm({
        title: "确定提现" + money + "元吗?",
      })
        .then(async () => {
          // on confirm
          const data = await withdraw({
            money,
          });
          if (data.code == 0) {
            this.$toast.success("提现申请成功");
          }else {
            uni.showToast({
              title: data.msg,
              duration: 2000,
              icon:'none'
            });
          }
        })
        .catch(() => {
          // on cancel
        });
      // uni.navigateTo({
      //   url: "/pages/withdraw/withdraw",
      // });
    },

  },
  onReachBottom() {},
  onHide() {},
};
</script>

<style scoped lang="scss" scoped>
.mch_info {
  height: 192upx;
  width: 100%;
  border-top: 16upx solid #f0eefd;
  border-bottom: 16upx solid #f0eefd;
  padding-left: 32upx;
  display: flex;
  align-items: center;
  .avatar {
    width: 112upx;
    height: 112upx;
    border-radius: 50%;
    margin-right: 20upx;
  }
  .right {
    // display: flex;
    // align-items: ;
    .mch_wx_name {
      // margin-bottom: 16upx;
    }
    .goods_btn {
      font-size: 28upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #727278;
    }
  }
}
.with_draw_box {
  padding: 22rpx 30rpx 10rpx;
  border-bottom: 16upx solid #f0eefd;
  .top_box {
    padding: 0rpx 20rpx 14rpx;
    border-bottom: 4rpx solid #fafafe;
  }
  .can_with_count {
    margin-top: 60rpx;
    font-size: 60rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #0a0819;
  }
  .icon-wenhao {
    margin-left: 10rpx;
  }
  .bottom_box {
    .can_with_text {
      padding-left: 24rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #0a0819;
      margin-top: 20rpx;
      margin-bottom: 60rpx;
      span {
        color: #f95a4b;
      }
    }
   /deep/ .with_btn {
      width: 594rpx;
      height: 80rpx;
      background: #fe3772;
      border-radius: 50rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 48rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      margin-left: 46rpx;
    }
  }
}
.tip_box {
  padding-top: 40upx;
  padding-left: 32upx;
}
</style>
